<template>
  <div>
    <div>
      <van-nav-bar
          title="商品详情"
          left-text="返回"
          left-arrow
          @click-left="tzback()"
      />
    </div>
    <!--1.内容-->
    <div>
      <van-row gutter="20">
        <van-col span="24">
          <van-swipe :autoplay="3000" lazy-render>
            <van-swipe-item >
              <img :src="foods.imgurl" />
            </van-swipe-item>
          </van-swipe>
        </van-col>
        <van-col span="24"><h2>{{foods.title}}</h2></van-col>
        <van-col span="12"><label class="l1">原价：{{foods.oldprice}}元</label></van-col>
        <van-col span="12"><label class="l2">平台价：{{foods.price}}元</label></van-col>
        <van-col span="12"><label class="l1">库存：{{foods.repertory}}</label></van-col>
        <van-col span="12"><label class="l1">运费：{{foods.freight==0?'包邮':foods.freight}}</label></van-col>
        <!--        <van-col span="12" v-show="type==1">-->
        <!--          <label class="l1">浏览量：{{goods.looks}}</label>-->
        <!--        </van-col>-->
        <!--        <van-col span="12" v-show="type==1">-->
        <van-col span="12">
          <label class="l1" >购买量：{{foods.orders}}</label>
        </van-col>
        <van-col span="24" v-html="foods.detail"></van-col>
      </van-row>

    </div>
    <!--2.底部-->
    <div class="dv1">
      <van-action-bar>
        <van-action-bar-icon icon="chat-o" text="客服" @click="tzchat()" color="#ee0a24" />
        <van-action-bar-icon icon="cart-o" text="购物车" to="/cart" />
        <van-action-bar-icon icon="star" text="已收藏" color="#ff5000" />
        <van-action-bar-button type="warning" text="加入购物车" @click="add()" />
        <van-action-bar-button type="danger" text="立即购买" />
      </van-action-bar>

    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
  name: "FoodsDetail",
  data(){
    return{
      foods:{

      },
      // type:1
    }
  },
  mounted() {
    //页面加载，就会执行
    //axios请求后端接口 查询详情
    //获取商品id和type(1商品 2秒杀商品),获取用户id（VueX）
    var id=this.$route.query.fid;
    // this.type=this.$route.query.type;
    var url="/api/foods/detail.do";
    // if(this.type==2){
    //   //秒杀商品
    //   url="/api/skill/detail.do";
    // }
    this.axios.get(url+"?id="+id).then(res=>{
      if(res.data.code==200){
        //成功
        this.foods=res.data.data;
      }else{
        //失败
        Toast('亲，网络异常！');
      }

    })
  },
  methods:{
    tzback(){
      history.back();
    }, tzchat(){
      this.$router.push("/chat");
    },
    add(){
      //请求接口 实现加入购物车
      var obj={
        // uid:this.$store.state.user.id,
        fid:this.foods.id,
        price:this.foods.price
      }
      this.axios.post("/api/cart/save.do",obj).then(res=>{
        if(res.data.code==200){
          //成功  跳转
          this.$router.push("/cart");
        }else {
          Toast("亲。加入购物车失败！");
        }
      })
    }
  }
}
</script>

<style scoped>
.l1{
  font-size: 1rem;
}
.l2{
  font-size: 1rem;
  color: red;
}
</style>